<template>
  <div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3" style="margin-left:8px;">服务类型</span>
          <span class="c_7" >仅退款</span>
        </div>
      </div>
    </div>

    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5" style="margin-right:5px;">*</span>
          <span class="c_3">货物状态</span>
          <span class="c_7" v-if="goodsState=='1'">未收到货</span>
          <span class="c_7" v-if="goodsState=='2'">已收到货</span>
          <span class="c_4" v-if="goodsState==''">必填</span>
        </div>
        <div class="c_2" @click="popup" v-if="this.goodsState==''">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup" v-if="this.goodsState!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if="this.goodsState==''">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5" style="margin-right:5px;">*</span>
          <span class="c_3">退款原因</span>
          <span class="c_4" >必填</span>
        </div>
        <div class="c_2" @click="tip">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if="this.goodsState=='2'">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5" style="margin-right:5px;">*</span>
          <span class="c_3">退款原因</span>
          <span class="c_7" v-if="refundReason=='商品质量问题'">商品质量问题</span>
          <span class="c_7" v-if="refundReason=='尺寸/容量与商品描述不符'">尺寸/容量与商品描述不符</span>
          <span class="c_7" v-if="refundReason=='收到商品与描述不符'">收到商品与描述不符</span>
          <span class="c_7" v-if="refundReason=='卖家发错货'">卖家发错货</span>
          <span class="c_7" v-if="refundReason=='收到商品少件或破损'">收到商品少件或破损</span>
          <span class="c_7" v-if="refundReason=='其他'">其他</span>
          <span class="c_4" v-if="refundReason==''">必填</span>
        </div>
        <div class="c_2" @click="popup1" v-if="this.refundReason==''">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup1" v-if="this.refundReason!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if="this.goodsState=='1'">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5" style="margin-right:5px;">*</span>
          <span class="c_3">退款原因</span>
          <span class="c_7" v-if="refundReason=='快递一直未送到'">快递一直未送到</span>
          <span class="c_7" v-if="refundReason=='未按约定时间发货'">未按约定时间发货</span>
          <span class="c_7" v-if="refundReason=='快递无跟踪记录'">快递无跟踪记录</span>
          <span class="c_7" v-if="refundReason=='其他'">其他</span>
          <span class="c_4" v-if="refundReason==''">必填</span>
        </div>
        <div class="c_2" @click="popup3" v-if="this.refundReason==''">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup3" v-if="this.refundReason!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>

    <div class="c1" v-if="detailInfo.ordersState=='3'">
      <div class="c_item1">
        <div class="c_1" style="margin-left:5px;">
          <span class="c_5" style="margin-top:10px;margin-right:5px;">*</span>
          <span class="c_31">退款金额：</span>
          <span class="c_5" style="margin-top:10px;" @change="price">
              <van-field v-model="refundMoney" placeholder="必填" />
          </span>
        </div>
        <div class="c_1" style="margin-bottom:5px;">
          <span class="c_6" style="margin-left:5px;">可修改，最多不可超过 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</span>
        </div>
        <span class="c_6" style="margin-left:5px;color:red;margin-top:5px;">退款成功将收取1%“退款手续费”</span>
      </div>
    </div>

    <div class="c1" v-else>
      <div class="c_item1">
        <div class="c_1" style="margin-left:5px;display: inline-block">
          <span class="c_31">退款金额：</span>
          <span class="c_5" >¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</span>
        </div>
        <div class="c_1" style="margin-bottom:5px;">
          <span class="c_6" style="margin-left:5px;">不可修改，最多 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}},含发货邮费 ¥{{detailInfo.goodsFreight}}</span>        
        </div>
        <span class="c_6" style="margin-left:5px;color:red;">退款成功将收取1%“退款手续费”</span>
      </div>
    </div>

    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3">退款说明：</span>
          <span class="cc" @change="note">
              <van-field v-model="refundNote" placeholder="选填" @click="note" style="width:250px;"/>
          </span>
        </div>
      </div>
    </div>

    <van-popup v-model="showReason2" position="bottom" :style="{ height: '30%' }">
      <div class="reason_title">服务类型</div>
      <div class="reason">
        <div class="reason_item">
          <div>仅退款</div>
          <div>
            <van-radio name="1" checked-color="#ff6000" v-model="refundType" @click="type"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>退货退款</div>
          <div>
            <van-radio name="2" checked-color="#ff6000" v-model="refundType" @click="types"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <van-popup v-model="showReason" position="bottom" :style="{ height: '50%' }">
      <div class="reason_title">货物状态</div>
      <div class="reason">
        <div class="reason_item">
          <div >
            <div >未收到货</div>
            <div style="font-size:12px;color:#999999;margin-top:10px">未收到货，或与商家协商后申请</div>
          </div>
          <div>
            <van-radio name="1" checked-color="#ff6000" v-model="goodsState" @click="state"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div >
            <div >已收到货</div>
            <div style="font-size:12px;color:#999999;margin-top:10px">已收到货，不符合商品描述</div>
          </div>
          <div>
            <van-radio name="2" checked-color="#ff6000" v-model="goodsState" @click="states"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <van-popup v-model="showReason1" position="bottom" :style="{ height: '65%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>商品质量问题</div>
          <div>
            <van-radio name="商品质量问题" checked-color="#ff6000" v-model="refundReason" @click="question1"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>尺寸/容量与商品描述不符</div>
          <div>
            <van-radio name="尺寸/容量与商品描述不符" checked-color="#ff6000" v-model="refundReason" @click="question2"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品与描述不符</div>
          <div>
            <van-radio name="收到商品与描述不符" checked-color="#ff6000" v-model="refundReason" @click="question3"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>卖家发错货</div>
          <div>
            <van-radio name="卖家发错货" checked-color="#ff6000" v-model="refundReason" @click="question4"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品少件或破损</div>
          <div>
            <van-radio name="收到商品少件或破损" checked-color="#ff6000" v-model="refundReason" @click="question5"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <van-popup v-model="showReason3" position="bottom" :style="{ height: '50%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>快递一直未送到</div>
          <div>
            <van-radio name="快递一直未送到" checked-color="#ff6000" v-model="refundReason" @click="question7"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>未按约定时间发货</div>
          <div>
            <van-radio name="未按约定时间发货" checked-color="#ff6000" v-model="refundReason" @click="question8"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>快递无跟踪记录</div>
          <div>
            <van-radio name="快递无跟踪记录" checked-color="#ff6000" v-model="refundReason" @click="question9"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      ordersId:'',
      userId:'',
      showReason: false,
      showReason1: false,
      showReason2: false,
      showReason3: false,
      refundType:'1',//退款类型
      goodsState :'',//货物状态
      refundMoney:'',//退款金额
      refundReason:'',//退款原因
      refundImage:'',//图片
      refundNote:'',//备注
      imgList:[],
      url1: this.$api + "/marketorderservice/api/v1/market/getRefundByOrdersId", // 获取订单详情的接口
    };
  },
  props:['detailInfo','cansubmit'],
  methods: {
    //初始化
    getordersDetail() {
      let that = this;
      this.$Axios.Get(this.url1 + "/" + this.ordersId).then(function(res) {
        if(res.data){
           that.goodsState = res.data.goodsState;
           that.refundNote = res.data.refundNote;
           that.refundReason = res.data.refundReason;
           that.imgList = res.data.refundImage.split(',');
           that.refundImage = res.data.refundImage;
           that.$emit('reload',that.goodsState,that.refundReason,that.refundImage)
        }
      });
    },
    getgoodsState(){
      let that = this;
      this.$Axios.Get(this.url1 + "/" + this.ordersId).then(function(res) {
        if(res.data){
           that.goodsState = res.data.goodsState;
        }
      });
    },
    popup() {
      this.showReason = true;
      this.refundReason="";
    },
    popup1() {
      this.showReason1 = true;
    },
    popup2(){
      this.showReason2 = true;
    },
    popup3(){
      this.showReason3 = true;
    },
    tip(){
      this.$toast('请先选择货物状态');
    },
    type(){
      this.refundType = '1'
      this.$emit('func',this.refundType)
    },
    types(){
      this.refundType = '2'
      this.$emit('func',this.refundType)
    },
    state(){
      this.goodsState = '1'
      this.$emit('func1',this.goodsState)
    },
    states(){
      this.goodsState = '2'
      this.$emit('func1',this.goodsState)
    },
    question1(){
      this.refundReason = '商品质量问题'
      this.$emit('func2',this.refundReason)
    },
    question2(){
      this.refundReason = '尺寸/容量与商品描述不符'
      this.$emit('func2',this.refundReason)
    },
    question3(){
      this.refundReason = '收到商品与描述不符'
      this.$emit('func2',this.refundReason)
    },
    question4(){
      this.refundReason = '卖家发错货'
      this.$emit('func2',this.refundReason)
    },
    question5(){
      this.refundReason = '收到商品少件或破损'
      this.$emit('func2',this.refundReason)
    },
    question6(){
      this.refundReason = '其他'
      this.$emit('func2',this.refundReason)
    },
    question7(){
      this.refundReason = '快递一直未送到'
      this.$emit('func2',this.refundReason)
    },
    question8(){
      this.refundReason = '未按约定时间发货'
      this.$emit('func2',this.refundReason)
    },
    question9(){
      this.refundReason = '快递无跟踪记录'
      this.$emit('func2',this.refundReason)
    },
    note(){
      this.$emit('func3',this.refundNote)
    },
    price(){
      this.$emit('func4',this.refundMoney)
    },
    close() {
      this.showReason = false;
      this.showReason1 = false;
      this.showReason2 = false;
      this.showReason3 = false;
    },
    
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    if(this.cansubmit==false){
      this.getordersDetail();
    }
  }
};
</script>

<style scoped="">
.a {
  padding: 15px;
}
.b {
  width: 100%;
}
.text {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.txt {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  float: right;
}
.c {
  padding: 15px;
  padding-bottom: 0px;
  background: #fff;
  /* margin-bottom: 10px; */
  border-bottom: 1px solid #f8f8f8;
}
.c1 {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.c11 {
  padding: 5px 15px;
  background: #fff;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_item1 {
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_1 {
  align-items: center;
  display: flex;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display:flex;
}
.c_31 {
  padding: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.c_4 {
  margin-left: 15px;
  color: #aaa;
  display:flex;
  font-size:13px;
}
.c_7 {
  margin-left: 15px;
  font-size: 13px;
  /* font-weight: bold; */
  color: #333333;
  display:flex;
}
.cc{
  /* margin-left: 70px; */
  /* margin-top: -20px; */
  color: #aaa;
  display:flex;
  font-size:13px;
}
.icon {
  vertical-align: -2px;
}
.c_2 {
  color: #aaa;
  font-size: 14px;
}
.c_5 {
  font-size: 13px;
  color: #f22613;
}
.c_6 {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
}
.tit {
  padding: 5px;
}
.t_1 {
  font-size: 12px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
}
.t_2 {
  padding: 5px 0 10px 5px;
  font-size: 12px;
  color: #999999;
}
.van-cell {
  padding: 0;
}
/* .reason_title {
  text-align: center;
  padding: 25px 0;
  font-size: 20px;
} */
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason {
  padding: 0 10px;
}
.reason_item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
}
</style>